<template>
  <div class="video app-wrapper">
    <VideoPlayer></VideoPlayer>
    <div class="tab">
      <TabHeader></TabHeader>
      <div class="tab-body">
        <div class="tab-body-item video-list-wrapper">
          <ul class="video-list clearfix">
            <li class="video-item">
              <VideoItem></VideoItem>
              <p class="video-media-desc"><time>2019-07-12 13:56:09</time></p>
            </li>
            <li class="video-item">
              <VideoItem></VideoItem>
              <p class="video-media-desc"><time>2019-07-12 13:56:09</time></p>
            </li>
            <li class="video-item">
              <VideoItem></VideoItem>
              <p class="video-media-desc"><time>2019-07-12 13:56:09</time></p>
            </li>
            <li class="video-item">
              <VideoItem></VideoItem>
              <p class="video-media-desc"><time>2019-07-12 13:56:09</time></p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VideoPlayer from '@/components/VideoPlayer.vue';
import TabHeader from '@/components/TabHeader.vue';
import VideoItem from '@/components/VideoItem.vue';
export default {
  components: {
    VideoPlayer,
    TabHeader,
    VideoItem
  },
  props: {},
  data() {
    return {
    };
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.video {
  .video-list-wrapper {
    padding: 30px 16px 0;
    .video-item {
      float: left;
      width: 50%;
      padding: 0 16px;
      margin-bottom: 20px;
    }

    .video-media-desc {
      font-size: 26px;
      line-height: 60px;
      color: #999;
      text-align: center;
    }
  }

}
</style>